<template>
  <view class="p-2">
    <view class="item">
      <image class="image" :src="'' || cardinfo.image" mode="aspectFill"></image>
      <view class="title">会员卡</view>
      <view class="name">{{cardinfo.cardtypetext}}</view>
      <view class="time">有效期：{{cardinfo.edtime}}</view>
      <view class="id">No:{{cardinfo.ordersn}}</view>
      <view class="buy">
        <!-- ¥19999 -->
      </view>
    </view>
    <view class="mt-2 bg-white rounded p-4">
      <view>
        <u-icon name="camera"/>
        <text class="u-m-l-8">给商家扫码</text>
      </view>
    </view>
    <view class="mt-2 bg-white rounded p-4 text-xs">
      <view class="flex justify-between items-center ">
        <view>
          <u-icon name="camera"/>
          <text class="u-m-l-8">【健身】乐享健身工作室</text>
        </view>
        <view>
          <u-icon name="phone-fill"/>
          <text class="u-m-l-8">联系商家</text>
        </view>
      </view>
      <view class="u-m-t-16 text-gray">
        <u-icon name="clock"/>
        <text class="u-m-l-8">营业中 周一至周日 10：00-21：00</text>
      </view>
      <view class="u-m-t-16 text-gray">
        <u-icon name="map"/>
        <text class="u-m-l-8">梁溪区中山路138号云蝠大厦15楼1502</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customStyle:{
          width:'200rpx',
      },
      category_id: '',
      goods: [],
      scrollTop: 0,
      status: 'loadmore',
      is_update: false,
      has_more: false,
      page: 1,
      keyword: '',
      query: {},
      current: 0,
      tabList: [{name: '购买会员卡'}, {name: '我的会员卡'}],
      value: '',
      options: [{label: '全部分类', value: ''}],
      myCard: [],
	  cardinfo:''
    };
  },
  onLoad(e) {
    this.id = e.id || '';
    this.keyword = e.keyword || '';
    // this.getGoods();
    this.getMyCardinfo()
  },
  methods: {
	  
	  getMyCardinfo() {
		let id=this.id;  
	    this.$api.getmyCardinfo({id:id}).then(res => {
	      this.cardinfo = res.data
	    })
	  },
	  
  }
}
</script>

<style lang="scss">
page {
  background-color: #f1f1f1;
}

.item {
  width: 700rpx;
  height: 300rpx;
  position: relative;
  border-radius: 20rpx;
  margin: auto auto 20rpx;
  display: flex;
  align-items: center;

  .image {
    position: absolute;
    left: 0;
    top: 0;
    width: 700rpx;
    height: 300rpx;
    border-radius: 20rpx;
  }

  .title {
    position: absolute;
    left: 20rpx;
    top: 20rpx;
    font-size: 36rpx;
    font-weight: bold;
  }

  .name {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    line-height: 300rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: white;
  }

  .time {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    font-size: 11px;
  }

  .id {
    position: absolute;
    left: 20rpx;
    bottom: 20rpx;
    font-size: 11px;
  }

  .buy {
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
  }


}
</style>
